<template>
  <div class="superior">
    <NavBar />
    <div class="container">
      <div class="banner">
        <a v-if="banner.length" target="_blank" :href="banner[0].hyperlink">
          <img :src="banner[0].imgUrl" style="border-radius:8px;">
        </a>

      </div>
      <div class="guid item">
        <img src="../../assets/res/img/icon_find.png">
        <b class="ftz20">
          <h1>找高手</h1>
        </b>
        <span guid>
          <a href="javascript:void(0)" @click="changeView('1')" :class="{'on':defaultView === '1'}" class=" ftz16">理财顾问</a>
          <a href="javascript:void(0)" @click="changeView('2')" :class="{'on':defaultView === '2'}" class="ftz16">理财机构</a>
          <a href="javascript:void(0)" @click="changeView('3')" :class="{'on':defaultView === '3'}" class="ftz16">理投达人</a>
        </span>
        <form v-if="fieldList.length" class="fr layui-form">
          <span class="ftz16">理投师</span>
          <span class="layui-inline">
            <input v-model.trim="searchData.keyword" type="text" placeholder="点击回车键搜索" class="layui-input" style="height:38px; text-align:left; padding: 0 10px;" @keyup.enter="init">
          </span>
          <span class="ftz16">擅长领域</span>
          <span class="layui-inline" id="domainValue">
            <select lay-filter="domain">
              <option value="">全部</option>
              <option v-for="(item, index) in fieldList" :key="index" :value="item.id">{{item.name}}</option>
            </select>
          </span>
        </form>
      </div>
      <div class="con width-100">
        <div class="width-100" id="lcgw" v-if="defaultView === '1'&&viewList.length||defaultView === '3'&&viewList.length">
          <ul class="width-100">
            <li class="item w48" v-for="(item, index) in viewList" :key="index">
              <div class="photo">
                <a href="javascript:void(0)" @click="linkToDashboard(item.certification.userId)" class="img photo-level">
                  <img :src="item.certification.avatar">
                  <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                </a>
                <button @click="modifyUserFocusEvent(item)" :class="{'followed':item.focusStatus === '0'}">{{item.focusStatus === '0'?'已关注':'+关注'}}</button>
              </div>
              <div class="info">
                <span>
                  <a href="javascript:void(0)" @click="linkToDashboard(item.certification.userId)" class="name ftz18">{{item.certification.nickname}}</a>
                  <span v-if="defaultView !== '3'" class="line"></span>
                  <span v-if="defaultView !== '3'">{{item.certification.company}}</span>
                </span>
                <p>
                  <a href="javascript:void(0)">粉丝（{{item.fansNum}}）</a>
                  <a href="javascript:void(0)">观点（{{item.viewpointNum}}）</a>
                  <a href="javascript:void(0)" v-if="defaultView !== '3'">计划（{{item.planNum}}）</a>
                  <a href="javascript:void(0)">问答（{{item.questionNum}}）</a>
                </p>
                <span class="txt">{{item.certification.descs}}</span>
                <div class="label width-100">
                  <ul class="width-100">
                    <li v-for="(option, num) in item.certification.tags" :key="num">{{option}}</li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="width-100" id="lcjg" v-if="defaultView === '2'&&viewList.length">
          <ul class="width-100">
            <li class="itemc" v-for="(item, index) in viewList" :key="index">
              <a class="img photo-level" @click="linkToDashboard(item.certification.userId)" href="javascript:void(0)">
                <img class="orgLogo" :src="item.certification.avatar" alt="" :title="item.title">
                <span :class="[`level`,`level_${item.certification.authType}`,``]"></span>
              </a>
              <div class="info">
                <a href="javascript:void(0)" @click="linkToDashboard(item.certification.userId)" class="ftz16">{{item.certification.nickname}}</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="load-more item margin-top-20" load_more>
          <button v-if="total > viewList.length" class="load-more ftz16" @click="loadMore">
            <template v-if="loading">
              <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
              <span>正在加载，请稍候......</span>
            </template>
            <span v-else>点击加载更多...</span>
          </button>
          <button class="load-more ftz16" v-if="total===viewList.length">数据已经全部加载</button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import * as api from '@/service/api'
import { mapState } from 'vuex'
// import $ from 'jquery'
export default {
  components: {
    NavBar,
    Footer
  },
  data () {
    return {
      searchData: {
        domain: '',
        keyword: ''
      },
      fieldList: [],
      viewList: [],
      // orgsList: [],
      // expertTotal: null,
      banner: [],
      total: null,
      pageSize: 10,
      orgsPageSize: 8,
      pageNum: 1,
      // orgsPageNum: 1,
      defaultView: '1',
      layerLoad: null,
      loading: false
    }
  },
  watch: {
    searchData: {
      deep: true,
      handler (val) {
        console.log(val)
      }
    }
  },
  created () {
    this.getFieldTagList()
    this.getMovePicture()
    this.init()
  },
  mounted () {
    if (window.layer) {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    ...mapState({
      userInfo: state => state.me.sysUser || {}
    }),
    curRoute () {
      return this.$route.path
    }
  },
  methods: {
    init () {
      this.pageNum = 1
      this.viewList = []
      if (this.defaultView === '2') {
        this.pageSize = 8
      } else {
        this.pageSize = 10
      }
      this.getCertList()
    },
    refreshView () {
      let that = this
      window.layui.use(['layer', 'form', 'element'], function () {
        // layer
        let form = window.layui.form
        let element = window.layui.element
        form.on('select(domain)', function (data) {
          that.changeDomain(data)
          form.render()
        })
        form.render()
        element.render()
      })
    },
    changeView (data) {
      if (this.defaultView === data) {
        return false
      }
      this.defaultView = data

      this.init()
    },
    changeDomain (data) {
      this.$set(this.searchData, 'domain', data.value)
      this.init()
    },
    loadMore () {
      this.pageNum = this.pageNum + 1
      this.getCertList()
    },
    modifyUserFocusEvent (item) {
      this.modifyUserFocus(item)
      // window.layer.closeAll()
    },
    linkToDashboard (itemId) {
      if (this.userId === itemId) {
        if (this.userInfo.authType === '0') {
          // this.$router.push('/dashboardAuth')
          this.$router.push('/dashboardUser/live')
        } else {
          this.$router.push('/dashboardAuth')
        }
      } else {
        this.$router.push('/dashboard/live/' + itemId)
      }
    },
    async getMovePicture () {
      let res = await api.getMovePicture({
        columnType: 'superior'
      })
      this.banner = res.data
    },
    async modifyUserFocus (item) {
      await api.modifyUserFocus({
        focusUserId: item.certification.userId,
        focusStatus: item.focusStatus === '0' ? '1' : '0'
      })
      this.init()
    },
    async getFieldTagList () {
      try {
        let res = await api.getFieldTagList({ 'domain': this.domain })
        this.fieldList = res.data
        this.$nextTick(() => {
          this.refreshView()
        })
        window.layer.close(this.layerLoad)
      } catch (e) {
        console.log(e)
      }
    },
    async getCertList () {
      try {
        if (this.orgsPageNum === 1) {
          this.orgsList = []
        }
        let res = await api.getCertList({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          authType: this.defaultView,
          ...this.searchData
        })
        this.viewList = this.viewList.concat(res.data.list)
        this.total = res.data.total
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/find";
.followed {
  background: #a6a6a6 !important;
}
.superior {
  .banner img {
    height: 250px;
    width: 1200px;
  }
}
</style>
